<template>
  <div>
    <div class="add_btn_top">
      <el-button
        class=""
        type="primary"
        icon="el-icon-edit-outline"
        size="mini"
        style="background: #2680d2"
        @click="openEdit"
        >编辑</el-button
      >
      <el-button
        v-permission="[2, 'button']"
        class=""
        icon="el-icon-delete"
        size="mini"
        @click="deleteDeviceType"
        >删除</el-button
      >
      <el-button class="" icon="el-icon-close" size="mini" @click="closePage"
        >关闭</el-button
      >
    </div>
    <edit-device-type
      :deviceTypeToken.sync="deviceTypeToken"
      :editdevicetype="editdevicetype"
      @changeShow="showEdit"
    />
    <Details :detail="devicetypesdetailed" :qrCode="qrCode"></Details>
    <div class="details_bottom" v-if="deviceTypeToken">
      <div class="" :key="tabKey">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          class="detailsTabs"
        >
          <el-tab-pane name="first" label="点位" class="tabPaneHeight">
            <div v-permission="[14, 'list']">
              <points-tab
                :deviceTypeToken="deviceTypeToken"
                :pointsList="pointsList"
                @updatePointsList="getDeviceTypeLinkedData"
                ref="pointsTabList"
              />
              <Pagination
                @pagination="pagination"
                :total="total"
                :page.sync="pageNum"
                :limit.sync="pageSize"
                :pageSizes.sync="pageSizes"
              />
            </div>
          </el-tab-pane>

          <el-tab-pane name="second" label="命令" class="tabPaneHeight">
            <div v-permission="[18, 'list']">
              <command-tab
                :key="activeName"
                :deviceTypeToken="deviceTypeToken"
                :commandList="commandList"
                @updateCommandsList="getDeviceTypeLinkedData"
                ref="tabList"
              />
              <Pagination
                @pagination="pagination"
                :total="total"
                :page.sync="pageNum"
                :limit.sync="pageSize"
                :pageSizes.sync="pageSizes"
              />
            </div>
          </el-tab-pane>

          <el-tab-pane name="third" label="设备状态" class="tabPaneHeight">
            <div v-permission="[22, 'list']">
              <device-status-tab
                :key="activeName"
                :deviceTypeToken="deviceTypeToken"
                :deviceStatusList="deviceStatusList"
                @updateDeviceStatusList="getDeviceTypeLinkedData"
                ref="statusTabList"
              />
              <Pagination
                @pagination="pagination"
                :total="total"
                :page.sync="pageNum"
                :limit.sync="pageSize"
                :pageSizes.sync="pageSizes"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 添加点位？添加命令按钮/添加设备状态 -->
      <div class="buttonStyle" v-show="addPoints">
        <el-button
          type="primary"
          v-permission="[11, 'button']"
          size="mini"
          icon="el-icon-plus"
          class="addCommand"
          @click="openAddPoints"
          >添加点位</el-button
        >
      </div>
      <add-points
        :addPointsshow="addPointsshow"
        @changeShow="showAddPoints"
        :deviceTypeToken="deviceTypeToken"
        @updatePointsList="getDeviceTypeLinkedData"
      />

      <div class="buttonStyle" v-show="addCommand">
        <el-button
          type="primary"
          v-permission="[15, 'button']"
          size="mini"
          icon="el-icon-folder-add"
          class="addCommand"
          @click="openAddCommand"
          >添加命令</el-button
        >
      </div>
      <add-command
        :deviceTypeToken="deviceTypeToken"
        :addcommandshow="addcommandshow"
        @changeShow="showAddCommand"
        @updateCommandsList="getDeviceTypeLinkedData"
      />

      <div class="buttonStyle" v-show="addStatus">
        <el-button
          type="primary"
          v-permission="[19, 'button']"
          size="mini"
          icon="el-icon-folder-add"
          class="addCommand"
          @click="openAddStatus"
          >添加设备状态</el-button
        >
      </div>
      <add-device-status
        :deviceTypeToken="deviceTypeToken"
        :AddStatusshow="AddStatusshow"
        @changeShow="showAddStatus"
        @updateDeviceStatusList="getDeviceTypeLinkedData"
      />
    </div>
  </div>
</template>

<script>
// 文本复制
import textCopy from "../../common/textCopy.js";
import { closeTab } from "../../common/js/tab-comm.js";
import { formatTime } from "@/views/common/js/utils.js";
import EditDeviceType from "./EditDeviceType.vue";
import PointsTab from "./PointsTab.vue";
import DeviceStatusTab from "./DeviceStatusTab.vue";
import AddCommand from "./AddCommand.vue";
import AddPoints from "./AddPoints.vue";
import CommandTab from "./CommandTab.vue";
import AddDeviceStatus from "./AddDeviceStatus.vue";
import Pagination from "@/views/common/page";
import "../../../assets/style/deviceCss/commonStyle.css";
import Details from "@/components/Details";
import {
  getDetailsTab,
  deleteDeviceType,
  getDeviceDetails,
  getQrcodeData
} from "@/api/deviceType";
import { generateId } from "@/utils/index.js";
export default {
  name: "devicetypedetails",
  components: {
    Details,
    EditDeviceType,
    CommandTab,
    AddCommand,
    PointsTab,
    AddPoints,
    DeviceStatusTab,
    AddDeviceStatus,
    Pagination
  },
  data() {
    return {
      tabKey: generateId(),
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      activeName: "first",
      addPoints: true,
      addCommand: false,
      addStatus: false,
      qrCodeShow: false,
      qrCode: "",
      deviceTypeToken: "",
      devicetypesdetailed: {},
      editdevicetype: false,
      addcommandshow: false,
      addPointsshow: false,
      AddStatusshow: false,
      pointsList: [],
      commandList: [],
      deviceStatusList: []
    };
  },
  watch: {
    "$route.query.deviceTypeToken": {
      deep: true,
      immediate: true,
      handler: function(val, oldV) {
        if (!val) return;
        console.log("val :>> ", val);
        this.deviceTypeToken = val;
        this.gettypesByToken();
        // this.getQrcode();
        this.getDeviceTypeLinkedData();
      }
    }
  },
  created() {},
  mounted() {
    console.log(
      "this.$route.query.deviceTypeToken :>> ",
      this.$route.query.deviceTypeToken
    );
    this.tabKey = generateId();
    // 单页面背景色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F3F4F9");
  },
  beforeDestroy() {
    // 单页面背景色
    document.querySelector("body").removeAttribute("style");
  },
  methods: {
    changeEditDevType(val) {},
    // 复制
    Copytext() {
      textCopy.copy();
    },
    // 时间格式转换
    formatDateT(date) {
      return formatTime(date);
    },
    // 二维码显隐
    mouseOver() {
      this.qrCodeShow = true;
    },
    mouseLeave() {
      this.qrCodeShow = false;
    },
    getQrcode() {
      var param = { responseType: "arraybuffer" };
      getQrcodeData(param, this.deviceTypeToken).then(res => {
        this.qrCode =
          "data:image/png;base64," +
          btoa(
            new Uint8Array(res.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ""
            )
          );
      });
    },
    // 获取设备类型详情
    gettypesByToken() {
      var param = { includeAsset: true };
      getDeviceDetails(param, this.deviceTypeToken).then(res => {
        this.devicetypesdetailed = Object.assign({}, res.data);
      });
    },
    // 关闭页面
    closePage() {
      // this.$router.replace({
      //   path: "/devicetype",
      // });
      // this.$router.go(-1);
      closeTab(this.$route.fullPath, "devicetype");
    },
    // 编辑按钮
    openEdit() {
      this.editdevicetype = true;
    },
    toLink(token) {
      // this.$router.go(0);
      this.$router.push({
        path: "/_empty",
        query: {
          data: JSON.stringify({ deviceTypeToken: token }),
          path: "devicetypedetails"
        }
      });
    },
    showEdit(data) {
      console.log("data :>> ", data);
      this.editdevicetype = false;
      if (data.isRefresh) {
        this.deviceTypeToken = data.deviceTypeToken;
        this.toLink(data.deviceTypeToken);
        // this.$router.push({
        //   path: "/devicetypedetails",
        //   query: { deviceTypeToken: data.deviceTypeToken },
        // });
        // this.gettypesByToken();
      }
    },
    // 添加命令按钮
    openAddCommand() {
      this.addcommandshow = true;
    },
    showAddCommand(data) {
      if (data === "false") {
        this.addcommandshow = false;
      } else {
        this.addcommandshow = true;
      }
    },
    // 添加点位按钮
    openAddPoints() {
      this.addPointsshow = true;
    },
    showAddPoints(data) {
      if (data === "false") {
        this.addPointsshow = false;
      } else {
        this.addPointsshow = true;
      }
    },
    // 添加设备状态按钮
    openAddStatus() {
      this.AddStatusshow = true;
    },
    showAddStatus(data) {
      if (data === "false") {
        this.AddStatusshow = false;
      } else {
        this.AddStatusshow = true;
      }
    },
    // 删除按钮
    deleteDeviceType() {
      var that = this;
      this.$confirm(
        "删除设备类型的同时系统会自动删除其相关的命令以及设备状态数据 确认删除吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          deleteDeviceType(that.deviceTypeToken).then(res => {
            this.closePage();
          });
        })
        .catch(() => {});
    },
    //'设备''设备组'转换文字
    changewords(status) {
      if (status == "Standalone") {
        return "设备";
      } else if (status == "Composite") {
        return "设备组";
      }
    },
    // tabs切换时按钮变化
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.addPoints = true;
        this.addCommand = false;
        this.addStatus = false;
      } else if (tab.name == "second") {
        this.addPoints = false;
        this.addCommand = true;
        this.addStatus = false;
      } else if (tab.name == "third") {
        this.addPoints = false;
        this.addCommand = false;
        this.addStatus = true;
      }
      this.getDeviceTypeLinkedData();
    },

    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.getDeviceTypeLinkedData();
    },

    //获取设备类型关联数据
    getDeviceTypeLinkedData() {
      this.loading = true;
      var params = {
        page: this.pageNum,
        pageSize: this.pageSize
      };
      var url = "";
      if (this.activeName == "first") {
        url =
          "/superlink/api/devicetypes/" + this.deviceTypeToken + "/attributes";
      } else if (this.activeName == "second") {
        url = "/superlink/api/commands";
        params.deviceTypeToken = this.deviceTypeToken;
      } else if (this.activeName == "third") {
        url = "/superlink/api/statuses";
        params.deviceTypeToken = this.deviceTypeToken;
      }
      getDetailsTab(url, params)
        .then(res => {
          const { data } = res;
          this.total = data.numResults;
          if (this.activeName == "first") {
            this.pointsList = data.results;
          } else if (this.activeName == "second") {
            this.commandList = data.results;
          } else if (this.activeName == "third") {
            this.deviceStatusList = data.results;
          }
          this.tabKey = generateId();
        })
        .finally(f => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.details_bottom {
  background-color: #fff;
  margin-top: 10px;
  /deep/ .el-tabs__header {
    margin-bottom: 0;
  }
  /deep/ .el-tabs__nav-wrap {
    padding-left: 20px;
  }
}

.creation-time {
  position: absolute;
  left: 63%;
  top: 66px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.update-time {
  position: absolute;
  left: 63%;
  top: 103px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}

.dividing-line {
  display: inline-block;
  height: 24px;
  width: 4px;
  margin: 0 10px;
  vertical-align: middle;
  background-color: #2680d2;
  position: absolute;
  top: 16px;
  left: 11px;
}
.update {
  position: absolute;
  left: 63%;
  top: 143px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.details {
  position: absolute;
  left: 63%;
  top: 180px;
}
.view-details {
  float: left;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.code-img {
  width: 29px;
  height: 29px;
  float: left;
  margin: -4px 0 0 15px;
}
.qrCode {
  width: 140px;
  height: 140px;
  margin-top: -20px;
  margin-left: 23px;
}
.qrCode-details {
  margin-left: 52px;
  margin-top: -5px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}
.box {
  position: absolute;
  left: 23px;
  display: inline-block;
  margin: 40px;
  width: 230px;
  height: 165px;
  padding: 20px;
  -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #bbb;
  z-index: 9999;
}
.box[data-box-arrow]:before,
.box[data-box-arrow]:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  border-color: transparent;
}
.box[data-box-arrow="top"]:before,
.box[data-box-arrow="top"]:after {
  bottom: 100%;
  left: 10px;
}
.box[data-box-arrow="top"]:before {
  border-bottom-color: #bbb;
}
.box[data-box-arrow="top"]:after {
  border-bottom-color: #fff;
  margin-bottom: -1px;
}
.buttonStyle {
  position: absolute;
  right: 13px;
  top: 13px;
}
/* .buttonStyle .el-button {
  background: #2680d2;
  color: #fff;
} */
.el-tooltip__popper {
  width: 80%; /*修改宽度*/
  background: #000 !important; /*背景色  !important优先级*/
  color: #ffffff !important; /*字体颜色*/
}
</style>
